<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="styles/vue-page-common.css">
  <script src="Scripts/vue.min.js"></script>
  <script src="StaticFiles/element-ui/element-ui.js"></script>
  <script src="Scripts/axios.min.js"></script>
  <script src="StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="Scripts/dayjs.min.js"></script>
  <script src="Scripts/axios.config.js"></script>
  <script src="Scripts/crypto-js.js"></script>
  <script src="Scripts/secret.js"></script>
  <title>MES报表系统</title>
  <style>
    .el-tree-node__content {
      height: 30px !important;
    }

    .el-tree-node__content:hover {
      font-weight: bold;
      color: #409EFF;
    }

    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-row class="header">
      <el-col :span="6">
        <img src="images/aeec_logo.png" height="60" alt="黎阳LOGO" />
      </el-col>
      <el-col :span="12" class="header-title" style="font-family: '楷体';font-size:32px;">
        制造执行系统报表看板
      </el-col>
      <el-col :span="6" class="currentTime">
        当前用户：{{fullname}}
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin: 0 10px;">
      <el-col :span="7" style="height: 800px;">
        <el-form style="margin:10px 0px;">
          <el-input placeholder="筛选报表" v-model="filterText" clearable prefix-icon="el-icon-search">
          </el-input>
        </el-form>

        <el-scrollbar style="height:100%" :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle=""
          :noresize="false" tag="section">
          <el-tree ref="tree" :data="treeData" node-key="id" @node-click="nodeClick" :filter-node-method="filterNode"
            default-expand-all="true">
            <div slot-scope="{ node, data }">
              <i v-if="data.pagetype == ''" class="el-icon-folder" style="color:orange"></i>
              <i v-else-if="data.pagetype == '报表'" class="el-icon-s-grid"></i>
              <i v-else class="el-icon-data-analysis"></i>
              {{data.label}}
              <el-tag v-if="data.isnew === '1'" type="success" effect="dark" size="mini" style="margin-left: 5px;">新
              </el-tag>
            </div>
          </el-tree>
        </el-scrollbar>
      </el-col>
      <el-col :span="17">
        <div style="margin:10px 0px;">
          <el-image style="height: 850px;width: 100%;opacity:0.5;border:2px solid #409EFF;"
            src="images/login-box-bg.svg" :fit="'container'">
          </el-image>
        </div>
      </el-col>
    </el-row>
  </div>

  <script type="module">
    import { getParams } from './Scripts/hooks/useCommonMethod.js'
    const app = new Vue({
      el: '#app',
      data: {
        currentTime: '',
        filterText: '',
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        employeeid: '',
        fullname: ''
      },
      methods: {
        async getUserInfo() {
          const { data: res } = await axios.post('handler/report/EmployeeWorkTimeCountReport.ashx?action=getUserInfo', {
            type: 'getUserInfo',
            employeeid: this.employeeid
          })
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg)
          }
          if (res.data.length == 0) {
            return this.$message.error('用户不存在!');
          }
          this.fullname = res.data[0].fullname;
        },
        async getUserPages() {
          const { data: res } = await axios({
            method: 'POST',
            url: 'handler/report/UserLogin.ashx?action=getUserReportPages',
            data: { type: 'getUserReportPages', employeeid: this.employeeid }
          })
          this.treeData = res.data;
        },
        nodeClick(data) {
          const { factoryid, pagetype, pageurl, ip } = data;
          if (!pageurl) { return; }
          const hasQuery = pageurl.indexOf('?') > -1;
          if (pagetype === '看板') {
            if (factoryid) {
              window.open(`http://${ip}/MESReport/kanban/${pageurl}${hasQuery ? '&' : '?'}uid=${this.employeeid}&factoryid=${Encrypt(factoryid)}`);
            } else {
              window.open(`http://${ip}/MESReport/kanban/${pageurl}${hasQuery ? '&' : '?'}uid=${this.employeeid}`);
            }
          } else {
            if (factoryid) {
              window.open(`http://${ip}/MESReport/BaoBiao/${pageurl}${hasQuery ? '&' : '?'}uid=${this.employeeid}&factoryid=${Encrypt(factoryid)}`);
            } else {
              window.open(`http://${ip}/MESReport/BaoBiao/${pageurl}${hasQuery ? '&' : '?'}uid=${this.employeeid}`);
            }
          }
        },
        filterNode(value, data) {
          if (!value) return true;
          return data.label.indexOf(value) !== -1;
        }
      },
      mounted() {
        if (!getParams('uid')) {
          return this.$message.error('用户未登录');
        }
        this.employeeid = Decrypt(getParams('uid'));
        this.getUserInfo();
        this.getUserPages();
      },
      watch: {
        // 筛选BOM节点
        filterText: function (val) {
          this.$refs.tree.filter(val);
        }
      }
    });
  </script>
</body>

</html>